<!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 -->
<template>
	<view class="container">

		<view class="">


			<view class="warp" style="width: 100%;height: auto;">


				<view style="width: 100%;">



					<view class="imagetu">
						<view
							style="line-height: 40px;border-radius: 5px;background-color:#fff;padding-left: 10px;font-weight: bold;color: #1890fe;">
							环境温度值</view>

						<view class="charts-box">
							<!-- 此处改变的是 seriesTemplate 模板中的默认配置，不必每个series都传smooth:true，将会覆盖:chartData.series 实现更低的代码量 -->
							<qiun-data-charts type="line" :opts="{extra:{line:{type:'curve'}}}"
								:eopts="{seriesTemplate:{smooth:true}}" :chartData="chartsDataLinetemperature" :echartsH5="true"
								:echartsApp="true" />
						</view>
					</view>

					<view class="imagetu">
						<view
							style="line-height: 40px;border-radius: 5px;background-color:#fff;padding-left: 10px;font-weight: bold;color: #1890fe;">
							环境光强度值</view>

						<view class="charts-box">
							<!-- 此处改变的是 seriesTemplate 模板中的默认配置，不必每个series都传smooth:true，将会覆盖:chartData.series 实现更低的代码量 -->
							<qiun-data-charts type="line" :opts="{extra:{line:{type:'curve'}}}"
								:eopts="{seriesTemplate:{smooth:true}}" :chartData="chartsDataLineLight" :echartsH5="true"
								:echartsApp="true" />
						</view>
					</view>
 
					<view class="imagetu">
						<view
							style="line-height: 40px;border-radius: 5px;background-color:#fff;padding-left: 10px;font-weight: bold;color: #1890fe;">
							环境湿度 </view>

						<view class="charts-box">
							<!-- 此处改变的是 seriesTemplate 模板中的默认配置，不必每个series都传smooth:true，将会覆盖:chartData.series 实现更低的代码量 -->
							<qiun-data-charts type="line" :opts="{extra:{line:{type:'curve'}}}"
								:eopts="{seriesTemplate:{smooth:true}}" :chartData="chartsDataLinehumidity" :echartsH5="true"
								:echartsApp="true" />
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>


<script>
	import demodata from '@/mockdata/lyhdemodata.json';
	export default {
		data() {
			return {
				chartsDataLineEC: {},
				chartsDataLinePH: {},
				chartsDataLineLight:{},
				chartsDataLinehumidity:{},
				chartsDataLinetemperature:{}
			}
		},
		onReady() {
			
			setInterval(() => {
				this.getServerData();
			}, 10000);
			
			
			// setTimeout(() => {
			// 	this.getServerData();
			// }, 1000);

			//演示变更数据后显示loading状态，如果不想展示loading状态，则不需要此步，可以注释掉看效果
			//  setTimeout(() => {
			//    this.chartsDataLineEC.series=[];
			// this.chartsDataLinePH.series=[];
			//  }, 4000);

			setTimeout(() => {

				//测试动态绑定的eopts
				this.ringOpts = {
					color: ['#FF00FF', '#AAFF11'],
					legend: {
						show: false
					}
				}
			}, 5000);
		},
		methods: {
			async getPruductStateValue(pmodelno,key,name,rows) {
				const ret = await this.$myRequest({
					url: "/api/product/v1/Charts/getModelCharts",
					data: {
						pguid: uni.getStorageSync('productGuid'),
						pmodelno:pmodelno,
						key:key,
						name:name,
						rows:rows
					}
				})
				//debugger
				if (ret.respCode == "200") {
					if(pmodelno==3 && key=="light")
					{
					this.chartsDataLineLight=ret.data;
					}
					else if(pmodelno==3 && key=="humidity")
					{
					this.chartsDataLinehumidity=ret.data;
					}
					else if(pmodelno==3 && key=="temperature")
					{
					this.chartsDataLinetemperature=ret.data;
					}
					console.log('sucess' + JSON.stringify(ret.data));

				} 

			},

			detail(id) {
				alert(id);
			},
			onClick(e) {
				uni.showToast({
					title: `点击${e.content.text}`,
					icon: 'none'
				})
			},
			buttonClick(e) {
				console.log(e)
				this.options[2].info++
			},
			getServerData() {

				//因部分数据格式一样，这里不同图表引用同一数据源的话，需要深拷贝一下构造不同的对象
				//开发者需要自行处理服务器返回的数据，应与标准数据格式一致，注意series的data数值应为数字格式
				this.chartsDataLineLight = JSON.parse(JSON.stringify(demodata.LineEC));
				this.chartsDataLinehumidity = JSON.parse(JSON.stringify(demodata.LinePH));
			},
			complete(e) {
				console.log("渲染完成事件", e);
			},
			getIndex(e) {
				console.log("获取点击索引事件", e);
			}
		},

		onLoad() {
			this.getServerData();
			/* 列表 */
			//this.getPruductStateValue(3,"light","光照", 10);
			//	this.getPruductStateValue(3,"humidity","湿度", 10);
			//		this.getPruductStateValue(3,"temperature","温度", 10);
		}
	}
</script>

<style lang="scss">
	.content {
		display: flex;
		flex-direction: column;
		flex: 1;
	}

	.charts-box {
		width: 100%;
		height: 200px;
	}

	.imagetu image {
		width: 98%;
		margin: 3px;

	}

	.imagetu {
		margin-bottom: 10px;
		background-color: #fff;
		border-radius: 5px;
		background-color: #fff;

	}

	.viewgrid {
		margin-top: 3px;
		padding: 3px;

		border: #cdcecf 0px solid;
		text-align: center;
		border-radius: 5px;
		background-color: #fff;
		color: #565656;
	}

	.tableList td {
		min-width: 200px;
		line-height: 50px;
	}

	.tableList input {
		margin: 0px auto;
		background-color: #b0e2a3;
		width: 200px;
		height: 35px;
	}

	.container {
		position: absolute;
		width: 100%;
		height: 100%;
		background-color: #f3f1f1;
		padding: 10px;
	}

	.flex-item {

		height: auto;
		text-align: center;
		line-height: 50px;
	}

	.flex-item-V {
		width: 100%;
		height: 150px;
		text-align: center;
		line-height: 150rpx;
	}

	.textBackgroud {
		margin: 15rpx 10rpx;
		padding: 0 20rpx;
		background-color: #ebebeb;
		height: 70rpx;
		line-height: 70rpx;
		text-align: center;
		color: #777;
		font-size: 26rpx;
	}
</style>